<template>
  <v-dialog v-model="helpDialogVisable" width="360">
    <template v-slot:activator="{ on, attrs }">
      <slot name="activator" :on="on" :attrs="attrs"
        ><v-btn v-bind="attrs" v-on="on" icon color="purple" x-large :elevation="6">
          <j-icon color="#9C27B0" size="20">mdi-help</j-icon></v-btn
        ></slot
      >
    </template>
    <v-card>
      <v-card-title>使用说明</v-card-title>
      <v-card-text>
        <ol>
          <li>最上面工具栏中的是搜索框。可输入诗歌标题查找对应的赞美</li>
          <li>
            右下方三个按钮分别是
            <ul>
              <li>
                <v-btn icon color="purple"> <j-icon>mdi-help</j-icon></v-btn>
                帮助按钮，里面有一些常用的操作说明
              </li>
              <li>
                <v-btn icon color="purple">
                  <j-icon>projector-screen</j-icon>
                </v-btn>
                投影按钮，点击打开弹窗，可以复制投影的链接。
              </li>
              <li>
                <v-btn icon color="purple"> <j-icon>mdi-settings</j-icon></v-btn>
                设置按钮，点击打开左侧抽屉，会出现投影的配项。分别有
                字体大小、字体颜色、背景颜色、字体阴影等投影效果的设置。
              </li>
            </ul>
          </li>
          <li>本投影控制优先移动端为控制端。PC端操作也可以当作控制端。不支持双向控制。</li>
        </ol>
      </v-card-text>
      <v-card-actions class="card-actions">
        <v-btn @click="helpDialogVisable = false">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  name: "JcHelp",
  data() {
    return {
      helpDialogVisable: false,
    };
  },
};
</script>
<style scoped>
.card-actions {
  display: flex;
  justify-content: flex-end;
}
</style>
